<template>
  <a-spin :spinning="confirmLoading">
    <a-form style="height: 400px;" :form="form">
      <a-row style="height: 90%">
        <a-col :span="14" style="height: 100%">
          <div style="height: 45%">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="车场编号：" v-show="false">
              <p v-decorator="['parkCode',{}]"></p>
            </a-form-item>
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="车场名称：" v-show="false">
              <p v-decorator="['parkName',{}]"></p>
            </a-form-item>
            <!--  <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="场内开通月租立即生效：">-->
            <a-form-item v-show="false">
              <label style="width: 150px;float: left;">场内开通月租立即生效: </label>
              <a-radio-group v-decorator="['venueOpenEffect', {initialValue:0}]">
                <a-radio style="margin-left: 20px;margin-right: 20px" :value="0">
                  立即生效
                </a-radio>
                <a-radio style="margin-left: 20px" :value="1">
                  暂不生效
                </a-radio>
              </a-radio-group>
            </a-form-item>
            <!--   <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="场内过期延期月租立即生效：">-->
            <a-form-item v-show="false">
              <label style="width: 175px;float: left;">场内过期延期月租立即生效: </label>
              <a-radio-group v-decorator="['venuePastDelayEffect', {initialValue:0}]">
                <a-radio style="margin-left: 20px;margin-right: 20px" :value="0">
                  立即生效
                </a-radio>
                <a-radio style="margin-left: 20px" :value="1">
                  暂不生效
                </a-radio>
              </a-radio-group>
            </a-form-item>
            <!--   <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="场内注销月租立即生效：">-->
            <a-form-item v-show="false">
              <label style="width: 150px;float: left;">场内注销月租立即生效: </label>
              <a-radio-group v-decorator="['venueLogoffEffect', {initialValue:0}]">
                <a-radio style="margin-left: 20px;margin-right: 20px" :value="0">
                  立即生效
                </a-radio>
                <a-radio style="margin-left: 20px" :value="1">
                  暂不生效
                </a-radio>
              </a-radio-group>
            </a-form-item>
            <a-form-item>
              <label style="width: 150px;float: left;">启用月租车组转卡功能: </label>
              <a-radio-group v-decorator="['startTransition', {initialValue:1}]">
                <a-radio style="margin-left: 20px;margin-right: 20px" :value=0>
                  启用
                </a-radio>
                <a-radio style="margin-left: 20px" :value=1>
                  不启用
                </a-radio>
              </a-radio-group>
            </a-form-item>
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="是否提示有效天数：">
              <a-select
                style="width: 150px;float: left;"
                v-decorator="['monthlyEffectiveDays', {initialValue:'1'}]"
                :options="dayTellSelect">
              </a-select>
            </a-form-item>
            <a-form-item>
              <label>临期月租天数配置：</label>
              <a-input-number :min="1" :max="99"   :precision="0" style="width: 100px"
                              v-decorator="['periodMonthlyDays', {initialValue:30}]"/>
              <span>天</span>
            </a-form-item>
          </div>

        </a-col>
        <a-col :span="10" style="height: 100%">
          <a-form-item>
            <label>在无通行权限区域的入场方式：</label>
            <a-select
                      style="width: 150px;"
                      v-decorator="['enterTypeNoPermission', {initialValue:carTypes[0].value}]"
                      :options="carTypes">
            </a-select>

          </a-form-item>
          <a-form-item>
            <label>月租车进出模式：</label>
            <a-select
                      style="width: 150px;"
                      v-decorator="['inOutType', {initialValue:inOutTypes[0].value}]"
                      :options="inOutTypes">
            </a-select>
          </a-form-item>

        </a-col>
      </a-row>
    </a-form>
    <div>
      <a-row>
        <a-col :md="8" :sm="8"></a-col>
        <a-col :md="4" :sm="4">
          <a-button @click="$emit('currentChange',3)">
            上一步
          </a-button>
        </a-col>
        <a-col :md="4" :sm="4">
          <a-button type="primary" style="margin-bottom: 20px" @click="handleOk(true)">
            确认设置
          </a-button>
        </a-col>
        <a-col :md="8" :sm="8"></a-col>
      </a-row>

    </div>
  </a-spin>
</template>
<script>
import {deleteAction, getAction, downFile, postAction,httpAction} from '@/api/manage'
import moment from "moment"

export default {
  name: "ConfigParkInfoModal",
  props: ['parkInfo'],

  data() {
    return {
      title: "操作",
      visible: false,
      model: {},
      carTypeSelectOption: [],
      monthlyEffectiveDays: "不提示",
      // 是否提示有效天数
      dayTellSelect: [{value: "1", label: "不提示"}, {value: "2", label: "全部提示"}, {value: "3", label: "临期月租提示"}],

      labelCol: {
        xs: {
          span: 12
        },
        sm: {
          span: 6
        },
        style: 'textAlign:left'
      },
      wrapperCol: {
        xs: {
          span: 12
        },
        sm: {
          span: 18
        },
      },
      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules: {},
      url: {
        list: "/monthlyCarConfig/list",
        add: "/monthlyCarConfig/add",
        edit: "/monthlyCarConfig/edit",
        getParkMonthlyCarConfig: "/monthlyCarConfig/queryByParkCode",
        getParkCarTypes: "/ConfigCarType/configCarType/parkCarTypeList"
      },

      resData: {},
      carTypes: [{label:"禁止入场",value:"-1"},{label:"按车辆性质入场",value:"0"}],
      // 月租车进出模式
      inOutTypes:[{label:"多进多出",value:"1"},{label:"一进一出",value:"2"},
        {label:"单进多出",value:"3"},{label:"多进单出",value:"4"}]
    }
  },

  created() {
    this.loadParkCarTypes()
    this.queryData()
  },
  methods: {
    loadParkCarTypes() {
      const that = this
      postAction(this.url.getParkCarTypes, {parkCode: this.parkInfo.parkCode}).then((res) => {
        if (res.success) {
          that.carTypes = [{label:"禁止入场",value:"-1"},{label:"按车辆性质入场",value:"0"}]
          if (res.result) {
            res.result.forEach(parkCarTypes => {
              that.carTypes.push({
                label: parkCarTypes.carTypeName,
                value: parkCarTypes.id
              })
            })
          }
        }
      })
    },
    queryData() {
      const that =this
      getAction(this.url.getParkMonthlyCarConfig, {parkCode: this.parkInfo.parkCode}).then((res) => {
        if (res.success) {
          that.resData = res.result
          if(res.result) {
            that.model.id = res.result.id;
            that.showData();
          }
        } else {
          that.$message.warning(res.message)
        }
      })

    },

    showData() {
      this.model = Object.assign({}, this.resData);
      this.visible = true;
      const that = this
      if (JSON.stringify(that.resData) !== '{}') {
        that.form.setFieldsValue({
          parkCode: that.resData.parkCode
        });
        that.form.setFieldsValue({
          parkName: that.resData.parkName
        });
        that.form.setFieldsValue({
          venueOpenEffect: that.resData.venueOpenEffect
        });
        that.form.setFieldsValue({
          monthlyEffectiveDays: that.resData.monthlyEffectiveDays
        });
        that.form.setFieldsValue({
          venuePastDelayEffect: that.resData.venuePastDelayEffect
        });
        that.form.setFieldsValue({
          venueLogoffEffect: that.resData.venueLogoffEffect
        });
        that.form.setFieldsValue({
          periodMonthlyDays: that.resData.periodMonthlyDays
        });
        that.form.setFieldsValue({
          startTransition: that.resData.startTransition
        });
        that.form.setFieldsValue({
          enterTypeNoPermission: that.resData.enterTypeNoPermission
        });
        that.form.setFieldsValue({
          inOutType: that.resData.inOutType
        });
      }
      this.confirmLoading = false
    },

    handleOk(b) {
      const that = this;
      // 触发表单验证
      this.form.validateFields(async (err, values) => {
        if (!err) {
          that.confirmLoading = true;
          let httpurl = '';
          let method = '';
          if (!this.model.id) {
            httpurl = this.url.add;
            method = 'post';
          } else {
            httpurl = this.url.edit;
            method = 'put';
          }
          let formData = Object.assign(this.model, values);
          formData.parkCode = this.parkInfo.parkCode;
          formData.parkName = this.parkInfo.parkName;
          formData.venueOpenEffect=''
          formData.venuePastDelayEffect=''
          formData.venueLogoffEffect=''
           httpAction(httpurl, formData, method).then((res) => {

            if (res.success) {
               if(b){
                 that.$emit('ok');
               }
               that.$message.success(res.message)
              // that.$emit('currentChange', 4);
            } else {
              that.$message.warning(res.message);
            }
          }).finally(() => {
            that.confirmLoading = false;
          })
        }
      })
    },

    close() {
      this.$emit('close');
      this.form.resetFields()
      this.visible = false;
    },

    handleCancel() {
      this.close()
    },

  },


}
</script>
